<template>
  <div style="position: relative">
    <div style="position: sticky;top: 0;z-index: 999;padding-top: 20px;background-color: white;padding-bottom: 20px">
      <div class="table_Header">
        <el-row :gutter="24">
          <el-col :span="2">
            <div class="justify_left">
              <span class="table_HeaderTitle">订单日期</span>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="align_items">
              <span class="table_HeaderTitle">订单号</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="align_items">
              <span class="table_HeaderTitle">客户编号</span>
            </div>
          </el-col>

          <el-col :span="5">
            <div class="align_items">
              <span class="table_HeaderTitle">客户信息</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="align_items">
              <span class="table_HeaderTitle">发货状态</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="align_items">
              <span class="table_HeaderTitle">商品总数</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="align_items">
              <span style="text-align: center" class="table_HeaderTitle">商品金额</span>
            </div>
          </el-col>
          <el-col :span="2" v-show="ordertype == 'order'">
            <div class="align_items">
              <span style="text-align: center" class="table_HeaderTitle">店铺优惠</span>
            </div>
          </el-col>
          <el-col :span="2" v-show="ordertype == 'order'">
            <div class="align_items">
              <span style="text-align: center" class="table_HeaderTitle">实付金额</span>
            </div>
          </el-col>
          <el-col :span="6" v-show="ordertype == 'order'||ordertype == 'shipping'">
            <div class="justify_left">
              <span class="table_HeaderTitle">创建时间</span>
            </div>
          </el-col>
          <el-col :span="2" v-show="ordertype != 'order'&&ordertype != 'shipping'">
            <div class="align_items">
              <span style="text-align: center" class="table_HeaderTitle">结算运费</span>
            </div>
          </el-col>
          <el-col :span="2" v-show="ordertype != 'order'&&ordertype != 'shipping'">
            <div class="align_items">
              <span style="text-align: center" class="table_HeaderTitle">结算货款</span>
            </div>
          </el-col>
          <!--          <el-col :span="2" v-show="ordertype != 'order'&&ordertype != 'shipping'">-->
          <!--            <div class="align_items">-->
          <!--              <span style="text-align: center" class="table_HeaderTitle">供应商</span>-->
          <!--            </div>-->
          <!--          </el-col>-->
          <el-col :span="2">
            <div class="justify_right">
              <span class="table_HeaderTitle">操作</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table_List" v-for="item in shippingForm">
      <div class="table_ListHeader">
        <div class="align_items">
          <span class="table_ListHeaderTitle">送货单号：{{item.sn}}</span>
        </div>
        <div class="align_items">
          <span class="table_ListHeaderTitle">配送方式：{{item.shippingMethod|watchShippingMethod}}</span>
        </div>
      </div>
      <div style="padding: 10px">
        <el-row :gutter="24">
          <el-col :span="2">
            <div class="justify_left shop_Height">
              <span style="text-align: left" class="table_ContentTitle">{{item.orderDate | dateFormatter}}</span>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="align_items shop_Height">
              <span class="table_ContentTitle">{{item.orderSn}}</span>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="align_items shop_Height">
              <span class="table_ContentTitle">{{item.memberCode}}</span>
            </div>
          </el-col>
          <el-col :span="5">
            <div style="display: flex;flex-direction: column;justify-content: center" class="shop_Height">
              <span class="table_ContentTitle">{{item.consignee}} {{item.phone}}</span>
              <el-tooltip class="item" effect="dark" :content="item.address" placement="top">
                <span style="margin-top: 5px" class="table_ContentAddressTitle">{{item.address}}</span>
              </el-tooltip>
            </div>
          </el-col>

          <el-col :span="2">
            <div class="align_items shop_Height" >
              <div>
                <div class="table_ContentTitle">{{item.statusDescr}}</div>
                <div class="table_ContentTitle" style="font-size:8px;color:red" v-show="item.abnormal==true&&abnormalshow=='true'">(异常单)</div>
              </div>
              <!-- <el-tag type="danger" v-if="item.statusDescr">异常单</el-tag> -->
            </div>
          </el-col>
          <el-col :span="2">
            <div class="align_items shop_Height">
              <span class="table_ContentTitle">{{item.subQuantity}}</span>
            </div>
          </el-col>

          <el-col :span="2">
            <div class="justify_left shop_Height">
              <span class="table_ContentTitle">{{item.subPrice}}</span>
            </div>
          </el-col>
          <el-col :span="2" v-show="ordertype == 'order'">
            <div class="justify_left shop_Height">
              <span class="table_ContentTitle">{{item.discount | watchDiscount}}</span>
            </div>
          </el-col>
          <el-col :span="2" v-show="ordertype == 'order'">
            <div class="justify_left shop_Height">
              <span class="table_ContentTitle">{{item.amountPaid}}</span>
            </div>
          </el-col>
          <el-col :span="6" v-show="ordertype == 'order'||ordertype == 'shipping'">
            <div class="justify_left shop_Height">
              <span style="text-align: left" class="table_ContentTitle">{{item.createDate | datetimeFormatter}}</span>
            </div>
          </el-col>
          <el-col :span="2" v-show="ordertype != 'order'&&ordertype != 'shipping'">
            <div class="justify_left shop_Height">
              <span class="table_ContentTitle">{{item.shippingFreight}}</span>
            </div>
          </el-col>
          <el-col :span="2" v-show="ordertype != 'order'&&ordertype != 'shipping'">
            <div class="justify_left shop_Height">
              <span class="table_ContentTitle">{{item.subCost}}</span>
            </div>
          </el-col>
          <!--          <el-col :span="2" v-show="ordertype != 'order'&&ordertype != 'shipping'">-->
          <!--            <div class="justify_left shop_Height">-->
          <!--              <span class="table_ContentTitle">{{item.supplierName}}</span>-->
          <!--            </div>-->
          <!--          </el-col>-->
          <el-col :span="2">
            <div class="justify_right shop_Height" @click="detailsClick(item)">
              <a class="details_Title">订单详情</a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: [
    'shippingForm','shippingType','ordertype','abnormalshow'
  ],
  methods: {
    detailsClick(item) {
      var _this = this
      _this.$emit('detailsClick', item.id)
    }
  },
  filters: {
    watchShippingMethod(val){
      if (val == 0) {
        return '普通快递'
      } else if (val == 1) {
        return '到店提货'
      } else if (val == 2) {
        return '同城快送'
      }
    },
    warehouseType(val) {
      if (val == 1) {
        return '采购入库'
      } else if (val == 2) {
        return '采购退货'
      } else if (val == 3) {
        return '调拨入库'
      } else if (val == 4) {
        return '销售出库'
      } else if (val == 5) {
        return '销售退货'
      } else if (val == 6) {
        return '调拨出库'
      } else if (val == 7) {
        return '盘点损益'
      } else if (val == 8) {
        return '其他出库'
      }
    },
    status(val) {
      if (val == 0) {
        return '未确认'
      } else if (val == 1) {
        return '已派单'
      } else if (val == 2) {
        return '已发货'
      } else if (val == 3) {
        return '已送达'
      } else if (val == 4) {
        return '已完成'
      } else if (val == 5) {
        return '已关闭'
      }
    },
    watchDiscount (val) {
      if (val === undefined) {
        return 0
      } else {
        return val
      }
    },
  },
}
</script>

<style scoped>
.table_Header {
  width: 100%;
  background-color: #f5f7fa;
  padding: 10px;
}

.table_HeaderTitle {
  font-size: 12px;
  color: #353535;
  font-weight: 600;
}

.table_List {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #f2f2f2;
}

.table_ListHeader {
  width: 100%;
  padding: 10px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table_ListHeaderTitle {
  font-size: 12px;
  color: #888888;
}

.align_items {
  display: flex;
  align-items: center;
  justify-content: center;
}

.justify_left {
  display: flex;
  align-items: center;
}

.justify_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.table_ContentTitle {
  font-size: 12px;
  color: #353535;
  width: 100%;
  text-align: center;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table_ContentAddressTitle{
  font-size: 12px;
  color: #353535;
  width: 100%;
  text-align: center;
  display: block;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shop_Height {
  min-height: 30px;
}

.details_Title {
  font-size: 14px;
  color: #409EFF;
}
</style>
